import { Button } from "antd"
import { useEffect, useMemo, useState } from "react"
import Watermark from "antd-watermark"

const Dashboard = () => {
  // 修改 count 必须使用 setCount 来触发重新渲染
  const [count, setCount] = useState(0)
  // 1、 直接计算 2 倍
  const dbCount = count * 2
  // 2、 缓存计算结果，count 变了才变，类似 vue 的 computed
  const dbMemoCount = useMemo(() => count * 2, [count])


  // 不带依赖，组件初次渲染、重新渲染时会执行
  // 有点类似 vue 的生命周期，但其实应该理解为组件副作用函数
  useEffect(() => {
    // console.log('组件初次、重新渲染时执行 useEffect 回调')
    // 销毁时
    // return () => {
    //   console.log('组件销毁时执行 这里 回调')
    // }
  })

  useEffect(() => {
    console.log('render: 此时的count: ', count) // 看看重新渲染了多少次
  })

  // 指定依赖，类似 vue 的 watch ，重新渲染时会比对 count 值
  useEffect(() => {
    // console.log(count)
    // console.log('count 发生改变时执行 useEffect 回调')
  }, [count])

  const handleClick = () => {
    // setCount(count + 1)
    // setCount(count + 1)
    // setCount(count + 1) // 多次会合并为一次

    setCount(c => c + 1)
    setCount(c => c + 1)
    setCount(c => c + 1) // 由于批处理， useEffect 只更新了一次

    // console.log('start')
    // setCount(c => c + 1) // 传入更新函数，则不会合并更新
    // Promise.resolve().then(() => console.log('then-', count)) // 0
    // setCount(c => c + 1)
    // setCount(c => c + 1)
    // console.log('count-', count) // 但获取仍为 0
    // setTimeout(() => {
    //   setCount(c => c + 1)
    //   console.log('setTimeout-', count) // 0
    // }, 0)
    // console.log('end')

    // 由于闭包，拿到的都是 0
    // start
    // count- 0
    // end
    // then- 0
    // setTimeout- 0
  }

  return (
    <div style={{ height: '100%' }}>
      <Watermark content="React Demo" gap={[50, 50]} style={{ height: '100%' }}>
        <Button onClick={handleClick}>
          count: {count}
        </Button>
        <li>double count: {dbCount}</li>
        <li>double count with memo: {dbMemoCount}</li>
      </Watermark>
    </div>
  )
}

export default Dashboard

// import { useState } from 'react';

// export default function Scoreboard() {
//   const [isPlayerA, setIsPlayerA] = useState(true);
//   return (
//     <div>
//       {isPlayerA ? (
//         <Counter key="Taylor" person="Taylor" />
//       ) : (
//         <Counter key="Sarah" person="Sarah" />
//       )}
//       <button onClick={() => {
//         setIsPlayerA(!isPlayerA);
//       }}>
//         下一位玩家！
//       </button>
//     </div>
//   );
// }

// function Counter({ person }) {
//   const [score, setScore] = useState(0);
//   const [hover, setHover] = useState(false);

//   let className = 'counter';
//   if (hover) {
//     className += ' hover';
//   }

//   return (
//     <div
//       className={className}
//       onPointerEnter={() => setHover(true)}
//       onPointerLeave={() => setHover(false)}
//     >
//       <h1>{person} 的分数：{score}</h1>
//       <button onClick={() => setScore(score + 1)}>
//         加一
//       </button>
//     </div>
//   );
// }


// import { useReducer } from "react"

// // 定义初始值以及操作
// const initialState = { count: 0 }
// const reducer = (state: any, action: any) => {
//   switch (action.type) {
//     case 'increment':
//       return { count: state.count + 1 }
//     case 'decrement':
//       return { count: state.count - 1 }
//     default:
//       return state
//   }
// }

// const App = () => {
//   // 组件中使用
//   const [state, dispatch] = useReducer(reducer, initialState)
//   return <div>
//     <span>{state.count}</span>
//     <button onClick={() => dispatch({ type: 'increment' })}>+</button>
//     <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
//   </div>
// }

// export default App
